<template>
    <a-layout style="min-height: 100vh">
        <a-layout-header class="header">
            <a-space>
                <div class="logo-title">
                    <span>
                        <a href="https://vitejs.dev" target="_blank">
                            <img src="/vite.svg" alt="Vite Logo" />
                        </a>
                    </span>
                    <span style="color: yellow; font-size: 20px;"> 开源软件收集平台</span>
                </div>
                <div class="search">
                    <a-input-search placeholder="请输入搜索内容" enter-button />
                </div>
            </a-space>

            <!-- <a-menu v-model:selectedKeys="selectedKeys1" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
                <a-menu-item key="1">nav 1</a-menu-item>
                <a-menu-item key="2">nav 2</a-menu-item>
                <a-menu-item key="3">nav 3</a-menu-item>
            </a-menu> -->
        </a-layout-header>
        <a-layout>
            <!-- height: 100vh; 影响页面与内容的间隔高度; 影响侧边栏滚动条有无，但是设置后侧边栏又不工整，总是差content内容一截 -->
            <a-layout-sider class="sider" width="250" style="background: #fff; overflow: auto; " v-model:collapsed="collapsed" :trigger="null"
                collapsible>
                <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
                    :style="{ height: '100%', borderRight: 0 }">
                    <a-sub-menu key="sub1">
                        <template #title>
                            <span>
                                <AppstoreOutlined />
                                软件收集
                            </span>
                        </template>
                        <a-menu-item key="1">
                            <router-link to="/SoftList">
                                <SlackOutlined /> 软件列表
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="2">
                            <router-link to="/SoftDetail">
                                <QqOutlined /> 软件详情
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="3" @click="changeMenu('/SoftAdd')">
                            <AlipayCircleOutlined /> 软件添加
                        </a-menu-item>
                        <a-menu-item key="4" @click="changeMenu('/SoftUpdate')">
                            <WechatOutlined /> 软件更新
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="sub2">
                        <template #title>
                            <span>
                                <BankOutlined />
                                组件收集
                            </span>
                        </template>
                        <a-menu-item key="5">
                            <router-link to="/ComponentList">
                                <GithubOutlined /> 组件列表
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="6">
                            <router-link to="/ComponentDetail">
                                <WindowsOutlined /> 组件详情
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="7">
                            <router-link to="/ComponentAdd">
                                <AppleOutlined /> 组件添加
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="8">
                            <router-link to="/ComponentUpdate">
                                <AndroidOutlined /> 组件更新
                            </router-link>
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="sub3">
                        <template #title>
                            <span>
                                <ClusterOutlined />
                                依赖收集
                            </span>
                        </template>
                        <a-menu-item key="9">
                            <router-link to="/DependencyList">
                                <SketchOutlined /> 依赖列表
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="10">
                            <router-link to="/DependencyDetail">
                                <AccountBookOutlined /> 依赖详情
                            </router-link>
                        </a-menu-item>
                            
                        <a-menu-item key="11">
                            <router-link to="/DependencyAdd">
                                <DeploymentUnitOutlined /> 依赖添加
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="12">
                            <router-link to="/DependencyUpdate">
                                <FireOutlined /> 依赖更新
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="13">
                            option 13
                        </a-menu-item>
                        <a-menu-item key="14">option 14</a-menu-item>
                        <a-menu-item key="15">option 15</a-menu-item>
                        <a-menu-item key="16">option 16</a-menu-item>
                        <a-menu-item key="17">option 17</a-menu-item>
                        <a-menu-item key="18">option 18</a-menu-item>
                        <a-menu-item key="19">option 19</a-menu-item>
                        <a-menu-item key="20">option 20</a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="sub4">
                        <template #title>
                            <span>
                                <ClusterOutlined />
                                AntdVue组件收集
                            </span>
                        </template>
                        <a-menu-item key="21">
                            <router-link to="/FormDemo">
                                <FireOutlined /> 查询表单横放
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="22">
                            <router-link to="/SearchResultListDemo">
                                <FireOutlined /> 查询表单条件收缩
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="23">
                            <router-link to="/OtherFormControlsDemo">
                                <FireOutlined /> 表单控制
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="24">
                            <router-link to="/TimeRelatedControlsDemo">
                                <FireOutlined /> 表单时间控制
                            </router-link>
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout style="padding: 0 24px 24px">
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>
                        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                    </a-breadcrumb-item>
                    <!-- <a-breadcrumb-item>开源软件收集平台</a-breadcrumb-item> -->
                    <!-- <a-breadcrumb-item>List</a-breadcrumb-item> -->
                    <a-breadcrumb-item>{{router.currentRoute.value.name}}</a-breadcrumb-item>
                </a-breadcrumb>
                <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
                    <!-- , textAlign: 'center' -->
                    <div :style="{ padding: '24px', background: '#fff' }">
                        <!-- <h1>Ant Design</h1>
                        <p>Welcome to your Ant Design Vue application.</p> -->
                        <!-- <SoftList /> -->
                        <!-- {{router.options }} 路由 json -->
                        <router-view />

                        
                    </div>
                </a-layout-content>
                <a-layout-footer :style="{ textAlign: 'center' }">
                    文治集团 ©2024 版权所有
                </a-layout-footer>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
    // UserOutlined,
    // LaptopOutlined,
    // NotificationOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    AppstoreOutlined,
    BankOutlined,
    ClusterOutlined,
    AndroidOutlined,
    AppleOutlined,
    WindowsOutlined,
    GithubOutlined,
    WechatOutlined,
    AlipayCircleOutlined,
    QqOutlined,
    SlackOutlined,
    SketchOutlined,
    AccountBookOutlined,
    DeploymentUnitOutlined,
    FireOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
// 路由有且导入就可以用
// import SoftList from '@/pages/soft/SoftList.vue';

// const selectedKeys1 = ref<string[]>(['2']);
const selectedKeys2 = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
const collapsed = ref<boolean>(false);
const router = useRouter();


const changeMenu = (route: string) => {
    console.log("改变的侧边路由", route)
    //获取路由对象并切换
    // router.push(route)
    // Vue 重复点击相同路由报错的问题 // 目前没这个问题，不需要修改
    // 判断当前路由是否是点击的路由
    if (router.currentRoute.value.path !== route) {
        router.push(route)
    }

}

</script>

<style scoped>
.logo-title {
    flex: left;
    width: 200px;
    height: 50px;
}

.search {
    flex: left;
    width: 200px;
    height: 10px;
}

/* :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }" */
.sider {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    color: #1890ff;

    /* 侧边栏多余，下拉框, 不管用，要用:style */
    /* overflow: 'auto';
    height: '100vh';
    position: 'fixed';
    left: 0;
    top: 0;
    bottom: 0; */

}

.trigger:hover {
    color: #1890ff;
}

/* .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
} */

/* .logo {
    float: right;
    margin: 16px 0 16px 24px;
} */

/* .site-layout-background {
    background: #fff;
} */
</style>
